<template>
	<view v-if="navBar.data" class="myNavs" 
	:style="{
		backgroundColor:navBar.style.background,
		color:navBar.style.textColor,
		}">
		<view :style="{paddingTop:navBar.style.paddingTop+'px',
		paddingBottom:navBar.style.paddingTop+'px'}" class="item" :class="navItem" v-for="(item,index) in navBar.data" :key="index">
			<img :src="item.imgUrl" alt="" class="img">
			<text class="navtitle">{{item.text}}</text>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
	export default {
		name:"my-navbar",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('home',['navBar']),
			navItem(){
				if (this.navBar.style.rowsNum === 4){
					return 'navItemFour'
				} else if (this.navBar.style.rowsNum === 3){
					return 'navItemThree'
				} else {
					return 'navItemFive'
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
.myNavs{
	width: 750rpx;
	min-height: 180rpx;
	// background-color: pink;
	// height: 172rpx;
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	font-size: 26rpx;
	.item{
		&.navItemFour{
			width: 25%;
		}
		&.navItemThree{
			width: 33.33%;
		}
		&.navItemFive{
			width: 20%;
		}
		height: 100%;
		// background-color: black;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.img{
			// background-color: skyblue;
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}
		.navtitle{
			
		}
	}
	
}
</style>